<div id="sysRegister" class="xy-layout">
    <div class="xy-layout-center" data-options="border:false">
        <div class="layui-colla-item">
            <div class="layui-colla-title">
                <div class="xy-toolbar">
                    <div class="xy-toolbar-btn">
                        <button class="layui-btn layui-btn-sm" data-type="add"><i class="layui-icon"></i>修改</button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type=""><i class="layui-icon"></i>删除</button>
                    </div>

                    <div class="xy-toolbar-search">
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="支持模糊查询.." autocomplete="off"
                                   class="layui-input"/>
                        </div>
                        <button lay-filter="search" class="layui-btn layui-btn-sm" data-type="search">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                    </div>
                </div>
            </div>
            <!--添加class值：xy-table ,用于将layui渲染的table的外边距margin设置为0px-->
            <div class="layui-colla-content layui-show xy-table">
                <table class="layui-hide" lay-filter="test" id="sysData"></table>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        layout.initLayout("#sysRegister", {fit: true});
        $('.layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('type');
            active[method] ? active[method].call(this, othis) : '';
        });
    })
//    layui.use(['element', 'table', 'jquery'], function () {
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#sysData'
            , url: '/structure/listUserByStructure' //数据接口
            , even: true
            , skin: 'row'
            , id: 'sysData'
            , cellMinWidth: 100
            , cols: [[ //表头
                {type: 'numbers'}
                , {type: 'checkbox'}
                , {field: 'id', title: 'ID',width:100, sort: true}
                , {field: 'username', title: '用户名',width:200}
                , {field: 'sex', title: '性别',width:100, sort: true}
                , {field: 'sign', title: '签名',width:200}
                , {field: 'experience', title: '积分',width:100, sort: true}
                , {field: 'score', title: '评分', sort: true}
            ]]
            , page: true //开启分页
            , done: function (res, curr, count) {//数据渲染完成后的回掉函数
            }
        });
        table.render('#sysData');
        //触发事件
        var active = {
            add: function () {
                var that = this;
//多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '当你选择该窗体时，即会在最顶端'
                    , area: ['800px', '800px']
                    , shade: 0.3
                    , content: '/page/xinzeng'
                    , btn: ['提交', '重置'] //只是为了演示
                    , yes: function () {
                        alert("哼。讨厌")
                    }
                    , btn2: function () {
                        layer.closeAll();
                    }

                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }
        };



    });
</script>